import React from 'react'
import { otherRoutes } from '../router/Index'
import {  TabBar } from 'antd-mobile'
import { useNavigate,useLocation } from 'react-router-dom'
import style from './index.module.css'
function Tabbar() {
     const navigate=useNavigate()
  const location = useLocation()
  const { pathname } = location.pathname

  const setRouteActive = (value) => {
    navigate(value)
  }
  return (
    <div style={{height:'50px'}}>
        <div className={style['tarbar']}>

        
       <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {otherRoutes.map(item => (
        <TabBar.Item key={item.path} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
    </div>
    </div>
  )
}

export default Tabbar
